<template>
  <div>

    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" ref="passForm" label-width="120px" style="width: 85%;">

        <el-form-item 
          label="旧密码" 
          prop="oldPass"
          :rules="[
            {required: true, message: '请输入旧的密码', trigger: 'change' }
          ]">
          <el-input type="password" clearable v-model="form.oldPass"></el-input>
        </el-form-item>

        <el-form-item 
          label="新密码" 
          prop="newPass"
          :rules="[
            {required: true, message: '请输入新的密码', trigger: 'change' }
          ]">
          <el-input type="password" clearable v-model="form.newPass"></el-input>
        </el-form-item>

        <el-form-item 
          label="确认密码" 
          prop="confirmPass"
          :rules="[
            {required: true, message: '请再次输入新的密码', trigger: 'change' }
          ]">
          <el-input type="password" clearable v-model="form.confirmPass"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeEdit(false)">取 消</el-button>
        <SubmitButton 
          type="primary" 
          size="" 
          :ref-form="()=>{return this.$refs['passForm'];}" 
          :post-option="{url: modifyPassUrl, data: encryptPassForm(), callback: modifyCB }">
          确定
        </SubmitButton>
      </div>

    </el-dialog>

  </div>
  
</template>


<script>


  import SubmitButton from './common/SubmitButton'

  import UserApi from '../api/UserApi'

  import Md5Kit from '../kit/Md5Kit'  

//需要导入vuex的数据管理
import Store from '../store/index.js'

  export default {
  	components: {
  		SubmitButton
  	},
  	data(){
  	  return {

        form: {
          oldPass: '',
          newPass: '',
          confirmPass: '',
		  role:''
        },

        modifyPassUrl: UserApi.URL_PASS_MODIFY,
  	  }
  	},
    props: ['isShow'],
  	computed: {
      dialogVisible: {
        get: function(){
          return this.isShow;
        },
        set: function(newValue){
          this.closeEdit(false);
        }
      }
  	},
  	created(){
  	  this.role = Store.state.user.role;
  	},
  	methods: {
      modifyCB(json){
        this.closeEdit(true);
      },
      closeEdit(isSuccess){
        this.$refs['passForm'].resetFields();
        this.$root.eventHub.$emit('closePassEditDialog', isSuccess);
      },
      encryptPassForm(){
        return {
          oldPass: Md5Kit.encryptMd5(this.form.oldPass),
          newPass: Md5Kit.encryptMd5(this.form.newPass),
          confirmPass: Md5Kit.encryptMd5(this.form.confirmPass),
		  role: this.role
        }
      }
  	}
  }
</script>

